<!--出库   新增-->
<template>
    <el-dialog title="新增" :visible.sync="outBoundVisible" width="90%">
        <el-form :inline="true" :model="formInline">
            <el-form-item label="存货编码">
                <el-input v-model="formInline.code" placeholder="存货编码" type="number"
                          oninput="if(value.length>9)value=value.slice(0,9)">
                </el-input>
            </el-form-item>
            <el-form-item label="存货名称">
                <el-input v-model="formInline.name" placeholder="存货名称" clearable>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchHandle">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin-top: 20px" border show-summary
                  :summary-method="getSummaries">
            <el-table-column prop="outDate" label="出库日期" align="center" width="160">
                <template slot-scope="scope">
                    <el-date-picker v-model="scope.row.outDate" type="date" placeholder="出库日期"
                                    value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%">
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column prop="workshop" label="生产车间" align="center">
                <template slot-scope="scope">
                    <el-input placeholder="生产车间" v-model="scope.row.workshop" clearable></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="dictCategory" label="类别" align="center" width="150"></el-table-column>
            <el-table-column prop="model" label="规格型号" align="center" width="80"></el-table-column>
            <el-table-column prop="unit" label="计量单位" align="center" width="80"></el-table-column>
            <el-table-column prop="quantity" label="数量" align="center" width="120">
                <template slot-scope="scope">
                    <el-input placeholder="数量" v-model="scope.row.quantity" type="number"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="unitFee" label="单价" align="center" width="80"></el-table-column>
            <el-table-column prop="totalFee" label="金额" align="center" width="80">
                <template slot-scope="scope">
                    {{ scope.row.quantity * scope.row.unitFee }}
                </template>
            </el-table-column>
            <!--            <el-table-column prop="claimant" label="申领人" align="center" width="130">-->
            <!--                <template slot-scope="scope">-->
            <!--                    <el-input placeholder="申领人" v-model="scope.row.claimant"></el-input>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column prop="remark" label="备注" align="center">
                <template slot-scope="scope">
                    <el-input placeholder="备注" v-model="scope.row.remark" clearable></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <span @click="addRow(scope.$index)" style="color: #1E90FF">添加</span>
                    <span @click="deleteRow(scope.$index)" style="margin-left: 10px;color: #1E90FF">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="outBoundVisible = false">取 消</el-button>
            <el-button type="primary" @click="outboundSave">保存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            outBoundVisible: false,
            formInline: {
                name: '',
                code: ''
            },
            quantityCount: '',
            quantityNum: ''
        }
    },
    methods: {
        // 表格合计
        getSummaries(param) {
            const {columns, data} = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计:'
                    //只计算最后一列
                } else if (index === 5) {
                    const values = data.map(item => Number(item[column.property]))
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr)
                            if (!isNaN(value)) {
                                return prev + curr
                            } else {
                                return prev
                            }
                        }, 0)
                        // sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                } else {
                    sums[index] = ''
                }
            })
            this.quantityNum = sums[5]
            return sums
        },
        // 搜索    1.根据模糊搜索调接口返回数组
        searchHandle() {
            this.$http.get('/stock/stock/page', {
                params: {
                    name: this.formInline.name,
                    code: this.formInline.code,
                }
            }).then(({data: res}) => {
                if (res.code != 0) {
                    return this.$message.error(res.msg)
                }
                // 1.数组返回有值就显示     2.数组为空不显示
                this.tableData = res.data.list
                res.data.list.map(it => {
                    this.quantityCount = it.quantity
                })
            })
        },
        // 添加一行    数据内容赋值上一行
        addRow(index) {
            const prevRow = JSON.parse(JSON.stringify(this.tableData[index]));
            this.tableData.splice(index + 1, 0, prevRow);
        },
        // 删除
        deleteRow(index) {
            this.tableData.splice(index, 1);
        },
        // 保存     1.数组有值调接口     2.数组为空保存不成功
        outboundSave() {
            if (this.tableData.length > 0) {
                if (this.quantityNum <= this.quantityCount) {
                    this.tableData.map(item => {
                        delete item.alarmFlag;
                        delete item.quantityLower;
                        delete item.quantityUpper;
                        delete item.tenantId;
                        delete item.id;
                        item.totalFee = item.quantity * item.unitFee
                    })
                    this.$http.post('/stock/stockout/saveBatch', this.tableData).then(({data: res}) => {
                        if (res.code != 0) {
                            return this.$message.error(res.msg)
                        }
                        this.$message("保存成功")
                        this.outBoundVisible = false
                        this.$emit('addViews')
                        this.tableData = []
                        this.formInline.name = ''
                        this.formInline.code = ''
                    })
                } else {
                    this.$message("库存数量不足,无法出库")
                    return
                }
            } else {
                this.$message("库存为空,无法出库")
                return
            }
        }
    }
}
</script>